<template>
  <a-modal
    :title="'打印'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <a-button
      type="primary"
      style="position: absolute;right: 25px;top: 70px;"
      v-print="'#print'"
    >打印</a-button>
    <div
      id="print"
    >

      <div
        v-for="item,index in content"
        :key="index"
        class="printcard"
        :class="index % 2 == 1 ? 'page-break':''"
      >
        <a-row>
          <a-col :span="8">
            <span style="font-size: 20px;font-weight:500">样衣号:</span>
            <span style="font-size: 17px;margin-left:5px">{{item.sampleCode}}</span>
          </a-col>
          <a-col :span="8">
            <span style="font-size: 20px;font-weight:500">打印时间:</span>
            <span style="font-size: 17px;margin-left:5px">{{time}}</span>
          </a-col>
          <a-col :span="8">
            <span style="font-size: 20px;font-weight:500">波段:</span>
            <span style="font-size: 17px;margin-left:5px">{{item.band}}</span>
          </a-col>
        </a-row>
        <a-row style="margin-left:20px">
          <img :src="'http://172.18.1.48/image/' +item.brandName +'/product/thumbs/' +item.sampleCode.replace('-ZJ', '').replace('-G', '') +'.jpg'" alt="" srcset="" style="width: 150px;
    height: 150px;
    object-fit: contain;"
    onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'">
        </a-row>
        <a-row style="font-size: 20px;font-weight:500;margin-top:50px">
          <a-col :span="8">
            销售色
          </a-col>
          <a-col :span="8">
            主料代号
          </a-col>
          <a-col :span="8">
            代用号
          </a-col>
       
        </a-row>
        
        <a-row
          v-for="subitem,index in item.materialList"
          :key="index"
          style="font-size: 17px;margin-top:40px"
        >
          <a-col :span="6">
            {{subitem.colorCode}}
          </a-col>
          <a-col :span="6">
            {{subitem.materialCode}}
          </a-col>
          <a-col :span="6">
            {{subitem.replaceMaterialCode}}
          </a-col>
        </a-row>
      </div>
    </div>

  </a-modal>
</template>

<script>
const columns = [
  {
    name: "JNBY",
    value: "JNBY",
  },
  {
    name: "CROQUIS",
    value: "CROQUIS",
  },
  {
    name: "jnby by JNBY",
    value: "童装",
  },
  {
    name: "jnby for mini",
    value: "婴童",
  },
  {
    name: "LESS",
    value: "LESS",
  },
  {
    name: "Pomme de terre",
    value: "蓬马",
  },
  {
    name: "A PERSONAL NOTE 73",
    value: "APN 73",
  },
  {
    name: "JNBY HOME",
    value: "JNBY HOME",
  },
  {
    name: "校服",
    value: "校服",
  },
];
export default {
  components: {},

  props: {
    content: {
      type: Array,
      default: null,
    },
  },

  data() {
    return {
      columns,
      time: '',
      list:[],
    }
  },
  created() {
    this.content.map((item)=>{
      this.columns.map((subitem)=>{
        if(item.brand == subitem.name){
          item.brandName = subitem.value
        }
      })
    })
    setInterval(this.getTime, 500)
  },
  methods: {
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },

    reset() {
      this.$emit('closePrint')
    },
  },
}
</script>

<style scoped lang="less">
.printcard {
  margin-top: 40px;
  border: 1px solid #d9d9d9;
  padding: 20px;
}
@media print {
  .printcard{
    border: none !important;
  height: 15cm;
  
  }
  .page-break:not(:last-child) {
    page-break-after: always;
  }


  // @page {
  //   margin:0;
  // }

}
</style>
<style>
@media print{
    body {
    height: auto;
  }
}
</style>
